在昨天的文章中介紹了 JSX 的基本用法，並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。今天就會來介紹如何在 JSX 上使用大括號來進行 JavaScript 變數的傳遞，讓我們的動態可以隨著 JavaScript 來進行更動態的操作。

本次文章參考官方文件的：

• https://zh-hant.react.dev/learn/javascript-in-jsx-with-curly-braces

在 JSX 上傳遞資料

首先是跟 html 一樣，可以直接使用 雙引號 "" 與單引號 '' 來傳遞 string attribute 像是圖片 <img /> 的來源 src，連結 <a /> 的網址 href，都可以使用來寫死產生相對應的 UI。

function MyComponent() {
  return (
    <div>
      <a href="https://www.rebas.tw/" />
      <img
        src="https://www.rebas.tw/static/media/logo.ac41d395.svg"
        alt="Rebas Logo" 
      />
    </div>
  )
}

上面的程式碼就是會產生前往 野球革命 的連結與顯示 野球革命 的 Logo。

而像之前所說，React Component 就是 JavaScript function 回傳 JSX，所以我們也可以在裡面定義相對應的變數並且使用，這時候就會需要 大括號 {} 來引用這些變數，原本的 Component 就可以寫成：

function MyComponent() {
  const rebasUrl = "https://www.rebas.tw/"
  const rebasLogoSrc = "https://www.rebas.tw/static/media/logo.ac41d395.svg"

  return (
    <div>
      <a href={rebasUrl} />
      <img
        src={rebasLogoSrc}
        alt="Rebas Logo" 
      />
    </div>
  )
}

除了在 string attribute 上應用，我們也可以使用大括號在 children，像是在寫 <h1 /> 的時候可以寫成：

function MyComponent() {
  const title = "Hello World!"

  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

大括號也可以用來顯示出 陣列 (Array) 或是條件式的判斷 (if-else conditioning)，這在後面的篇章會有更多詳細介紹。

另外，不只直接引用變數，也可以使用字串串接在大括號裡面組成想要的內容：

function MyComponent() {
  const firstName = "Li-Hsuan"
  const lastName = "Hsieh"

  return (
    <div>
      <h1>{`Hello! My name is ${firstName} ${lastName}`}</h1>
    </div>
  )
}

我自己比較習慣使用 樣板字面值 (Template literal) 來完成串接。

哪裡使用大括號

文章中有提醒兩點使用大括號的時候要注意的：

1. 不能用於在 tag 的命名像是 <{tag}></{tag}>
2. 在當作 attribute 的時候要緊跟在 = 號後面，如果被引號包含住就會變成單純的字串
3. 也可以傳入 object 像是比較常用的是 inline style 的使用，會寫成 <div style={{}}></div>，會在大括號裡面包含另一個 object 的大括號。注意這邊 style 裡的 屬性在 JSX 這邊寫要用 camalCase 像是原本的 background-color 就要寫成 backgroundColor。

小結

在 Component 內部的參數傳遞大概介紹到這邊，明天的文章會接著介紹 Component 之間要如何傳遞資料。除了今天介紹的參數類型，其實大多數可以讀到值的參數都能透過大括號來傳遞，甚至可以在大括號裡面使用 function，這在以後也會時常用到，大家可以多試試。
今天就介紹到這邊，感謝大家耐心地看完，有任何問題或建議歡迎告訴我，明天見，晚安。